import { ActionFunctionArgs, LoaderFunctionArgs, redirect } from "@remix-run/node";
import { Form, useActionData, useLoaderData } from "@remix-run/react";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~/components/ui/card";
import { Checkbox } from "~/components/ui/checkbox";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { z } from "zod";
import { themeSessionResolver } from "~/sessions.server";

export const loader = async ({request} : LoaderFunctionArgs) => {
  const {getTheme} = await themeSessionResolver(request)
  return {
    theme: getTheme(),
  }
}

export default function Login() {
  const loaderData = useLoaderData<typeof loader>();
  const theme = loaderData.theme;
  let style = {
    background: "radial-gradient(ellipse at 50% 50%, hsl(263.4, 70%, 96%) 0%, hsl(0,0%,100%) 100%)"
  }
  if (theme && theme === "dark") {
    style = {
      background: "radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))"
    }
  }
  const actionData = useActionData<typeof action>();

  return (
    <div className="w-screen h-screen flex justify-center items-center" style={style}>
      <Card className="sm:w-96 w-full h-auto">
        <CardHeader className="text-center">
          <CardTitle>Login</CardTitle>
          <CardDescription>Welcome back !</CardDescription>
        </CardHeader>
        <CardContent>
          <Form method="post">
            <div className="mt-4">
              <Label htmlFor="email">Email</Label>
              <Input type="email" name="email" placeholder="Email" className={actionData?.email? "border-red-500" : ""} />
              {actionData?.email && <p className="text-red-500 text-sm mt-1">{actionData.email}</p>}
            </div>
            <div className="mt-4">
              <Label htmlFor="password">Password</Label>
              <Input type="password" name="password" placeholder="Password" className={actionData?.password? "border-red-500" : ""} />
              {actionData?.password && <p className="text-red-500 text-sm mt-1">{actionData.password}</p>}
            </div>
            <div className="flex justify-between items-center mt-4">
              <div className="flex items-center">
                <Checkbox id="remember" className="mr-2" />
                <Label htmlFor="remember">Remember me</Label>
              </div>
              <a href="#" className="text-sm text-primary">忘记密码？</a>
            </div>
            <Button className="w-full mt-6">登录</Button>
            <a href="#" className="block text-center text-sm text-primary mt-4">没有账号？注册</a>
          </Form>
        </CardContent>
        <CardFooter>

        </CardFooter>
      </Card>
    </div>
  )
}

const account = z.object({
  email: z.string().email({message: "请输入正确的邮箱"}),
  password: z.string().min(8, {message: "密码至少8位"}),
});

export const action = async ({
  request,
}: ActionFunctionArgs) => {
  const formData = await request.formData();
  const data = Object.fromEntries(formData);
  const result = account.safeParse(data);
  if (!result.success) {
    const error = result.error.flatten();
    return error.fieldErrors;
  }
  return redirect("/");
}